<template>
    <aa type='测试传值'></aa>
    <a-button @click="addItem" type="primary" class="t-right">新增</a-button>
    <a-table :columns="columns" :data-source="list" rowKey="primaryKey" :pagination='false'>
        <template #action="{ record }">
            <span>
                <a @click="editItem(record.primaryKey)">编辑</a>
                <a @click="deleteItem(record.primaryKey)">删除</a>
            </span>
        </template>
    </a-table>
    <a-pagination style="text-align:right;margin:15px 0;" @change="pageChange" :total="50" />
</template>
<script lang="ts">
import { DownOutlined } from "@ant-design/icons-vue";
import { defineComponent,createVNode, reactive, toRefs, onBeforeMount,onMounted,ref,inject } from "vue";
import {apiHandleList,apiHandleDelete} from "../../api/common"
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useRoute } from "vue-router"
import utils from "../../utils";
import aa from "./aa.vue"

const columns = [
    {
        title: "标题",
        dataIndex: "processName",
    },
    {
        title: "关联表单",
        dataIndex: "formName",
        width: 350
    },
    {
        title: "类型",
        dataIndex: "processType",
    },
    {
        title: "时间",
        key:"updateTime",
        dataIndex: "updateTime",
        slots: { customRender: 'updateTime' },
    },
    {
        title: "操作",
        slots: { customRender: "action" },
    },
];

export default defineComponent({
    setup(props,context) {
        console.log(props)
        console.log(context)
        const $Modal:any = inject('$Modal');
        const $Message:any = inject('$Message');
        const $router:any = inject('$router');
        const state = reactive({
            list:[],
            typeList:['类型1','类型2','类型3','类型4','类型5','类型6','类型7','类型8']
        });
        let pageSize = ref(20)
        let currentPage = ref(1)
        //列表数据源
        const getHandleList = async(page?:number) => {
            let result:any = await apiHandleList({
                pageSize:pageSize.value,
                currentPage:page ? page : currentPage.value
            })
            state.list = JSON.parse(JSON.stringify(result.rows)) || [];
            state.list.forEach((item:any)=>{
                item.updateTime = utils.formatDateTime(item.updateTime)
                item.processType = state.typeList[item.processType]
            })
        }
        //分页
        const pageChange = (e:any) => {
            getHandleList(e)
        }
        //删除
        const deleteItem = (key:string) => {
            $Modal.confirm({
                title: '确认删除?',
                icon:createVNode(ExclamationCircleOutlined),
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                async onOk() {
                    const res:any = await apiHandleDelete({ primaryKey: key })
                    if (res.success) {
                        $Message.success(res.message);
                        getHandleList()
                    } else {
                        $Message.error(res.message);
                    }
                },
                onCancel() {
                    console.log('Cancel');
                },
            })
        }
        //编辑
        const editItem = (key:string) => {
            $router.push({
                name:"flow-info",
                query:{key:key}
            })
        }
        //新增
        const addItem = () => {
            console.log($router)
            $router.push({
                name:"flow-info"
            })
        }
        onBeforeMount(() => {
            getHandleList()
        })
        onMounted(()=>{
            console.log(state)
        })
        return {
            ...toRefs(state),
            columns,
            pageChange,
            currentPage,
            pageSize,
            deleteItem,
            addItem,
            editItem
        };
    },
    components: {
        DownOutlined,
        aa
    },
});
</script>